<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>Raqba - Real Estate HTML Template | Login</title>
<!-- Stylesheets -->
<link th:href="@{/css/bootstrap.css}" rel="stylesheet">
<link th:href="@{/css/style.css}" rel="stylesheet">
<link th:href="@{/css/responsive.css}" rel="stylesheet">
<!--Color Switcher Mockup-->
<link th:href="@{/css/color-switcher-design.css}" rel="stylesheet">

<!--Color Themes-->
<link id="theme-color-file" th:href="@{/css/color-themes/default-theme.css}" rel="stylesheet">

<link rel="shortcut icon" th:href="@{/images/favicon.png}" type="image/x-icon">
<link rel="icon" th:href="@{/images/favicon.png}" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>

<body>

<div class="page-wrapper">
    <!-- Preloader -->
    <div class="preloader"></div>
    
    <!-- Main Header-->
    <header class="main-header header-style-one">
        <!--Header Top-->
        <div th:include="header :: headname"></div>
        <!--End Header Lower-->

        <!-- Sticky Header  -->
        <div class="sticky-header">
            <div class="auto-container clearfix">
                <!--Logo-->
                <div class="logo pull-left">
                    <a href="index.html" title=""><img src="images/icons/empty.png" data-src="images/logo-small.png" alt="" title=""></a>
                </div>
                <!--Right Col-->
                <div class="nav-outer pull-right">
                    <!--Mobile Navigation Toggler-->
                    <div class="mobile-nav-toggler"><span class="icon flaticon-menu"></span></div>
                    
                    <!-- Main Menu -->
                    <nav class="main-menu navbar-expand-lg">
                        <div class="navbar-collapse collapse clearfix">
                             <ul class="navigation clearfix"><!--Keep This Empty / Menu will come through Javascript--></ul>
                        </div>
                    </nav><!-- Main Menu End-->
                </div>
            </div>
        </div><!-- End Sticky Menu -->

        <!-- Mobile Menu  -->
        <div class="mobile-menu">
            <div class="menu-backdrop"></div>
            <div class="close-btn"><span class="icon flaticon-cancel-1"></span></div>
            
            <!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header-->
            <nav class="menu-box">
                <div class="nav-logo"><a href="index.html"><img src="images/icons/empty.png" data-src="images/logo.png" alt="" title=""></a></div>
                
                <ul class="navigation clearfix"><!--Keep This Empty / Menu will come through Javascript--></ul>
            </nav>
        </div><!-- End Mobile Menu -->
    </header>
    <!--End Main Header -->

    <!--Page Title-->
    <section class="page-title" style="background-image:url(images/background/4.jpg)">
        <div class="auto-container">
            <h1>Login</h1>
            <ul class="page-breadcrumb">
                <li><a href="index.html">home</a></li>
                <li>Login </li>
            </ul>
        </div>
    </section>
    <!--End Page Title-->

    <!--Login Section-->
    <section class="login-section">
        <div class="auto-container">
            <div class="row clearfix">
                <div class="column col-lg-6 col-md-12 col-sm-12 wow fadeInRight">
                    <!-- Login Form -->
                    <div class="login-form">
               <!--  如果msg的值为空就不会显示-->
                        <p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
                        <h2>Login</h2>
                        <!--Login Form-->
                        <form  th:action="@{/login}" method="post">
                            <div class="form-group">
                                <label>Username or Email</label>
                                <input type="text" name="username" placeholder="Name or Email " required>
                            </div>
                            
                            <div class="form-group">
                                <label>Enter Your Password</label>
                                <input type="password" name="password" placeholder="Password" required>
                            </div>
                            
                            <div class="form-group">
                                <input type="checkbox" name="remember" id="account-option-1">&nbsp; <label for="account-option-1">Remember me</label>
                            </div>

                            <div class="form-group">
                                <button class="theme-btn btn-style-three" type="submit" name="submit-form"><span class="btn-title">LOGIN</span></button>
                            </div>

                            <div class="form-group pass">
                                <a href="#" class="psw">Lost your password?</a>
                            </div>
                        </form>
                    </div>
                    <!--End Login Form -->
                </div>
                
                <div class="column col-lg-6 col-md-12 col-sm-12 wow fadeInLeft">
                    
                    <!-- Register Form -->
                    <div class="login-form register-form">
                        <h2>Register</h2>
                        <p style="color: red" th:text="${msg2}" th:if="${not #strings.isEmpty(msg)}"></p>
                        <!--Login Form-->
                        <form method="post" th:action="@{/register}">
                            <div class="form-group">
                                <label>User Name</label>
                                <input type="text" name="username" placeholder="Your Name" required>
                            </div>

                            <div class="form-group">
                                <label>Email Address</label>
                                <input type="email" name="email" placeholder="Your Email" required>
                            </div>
                            
                            <div class="form-group">
                                <label>Your Password</label>
                                <input type="password" name="password" placeholder="Password" required>
                            </div>
                            
                            <div class="form-group text-right">
                                <button class="theme-btn btn-style-three" type="submit" name="submit-form"><span class="btn-title">Register</span></button>
                            </div>
                        </form>      
                    </div>
                    <!--End Register Form -->
                </div>
            </div>
        </div>
    </section>
    <!--End Login Section-->
    
    <!-- Main Footer -->
    <div th:include="footer :: footname"></div>
    <!-- End Main Footer -->

</div>
<!-- End Page Wrapper -->

<!-- Color Palate / Color Switcher -->
<div class="color-palate">
    <div class="color-trigger">
        <i class="fa fa-cog"></i>
    </div>
    <div class="color-palate-head">
        <h6>Choose Your Color</h6>
    </div>
    <div class="various-color clearfix">
        <div class="colors-list">
            <span class="palate default-color active" data-theme-file="css/color-themes/default-theme.css"></span>
            <span class="palate green-color" data-theme-file="css/color-themes/green-theme.css"></span>
            <span class="palate blue-color" data-theme-file="css/color-themes/blue-theme.css"></span>
            <span class="palate orange-color" data-theme-file="css/color-themes/orange-theme.css"></span>
            <span class="palate purple-color" data-theme-file="css/color-themes/purple-theme.css"></span>
            <span class="palate teal-color" data-theme-file="css/color-themes/teal-theme.css"></span>
            <span class="palate brown-color" data-theme-file="css/color-themes/brown-theme.css"></span>
            <span class="palate redd-color" data-theme-file="css/color-themes/redd-color.css"></span>
        </div>
    </div>
    
    <div class="palate-foo">
        <span>You will find much more options for colors and styling in admin panel. This color picker is used only for demonstation purposes.</span>
    </div>
</div><!-- End Color Switcher -->

<!--Scroll to top-->
<div class="scroll-to-top scroll-to-target" data-target="html"><span class="fa fa-angle-double-up"></span></div>
<script th:src="@{js/jquery.js}"></script>
<script th:src="@{js/popper.min.js}"></script>
<script th:src="@{js/bootstrap.min.js}"></script>
<script th:src="@{js/jquery-ui.js}"></script>
<script th:src="@{js/jquery.fancybox.js}"></script>
<script th:src="@{js/jquery.stellar.min.js}"></script>
<script th:src="@{js/owl.js}"></script>
<script th:src="@{js/wow.js}"></script>
<script th:src="@{js/mixitup.js}"></script>
<script th:src="@{js/appear.js}"></script>
<script th:src="@{js/script.js}"></script>
<!-- Color Setting -->
<script th:src="@{js/color-settings.js}"></script>
</body>
</html>